<template>
  <UserInfoCom/>
  <div id="register-model">
    <el-row>
      <el-col><span><h2>修改密码</h2></span></el-col>
    </el-row>
    <el-form class="center" :model="data.openIdDto" :rules="data.openIdDto.rules" ref="openIdDto">
      <el-form-item prop="password">
        <el-input type="password" autocomplete="off" placeholder="请输入密码" show-password
                  v-model="data.openIdDto.password"/>
      </el-form-item>
      <div class="alert alert-info">
        <strong>密码规则:</strong>
        <ol>
          <li>至少含大写字母个数1</li>
          <li>至少含小写字母个数1</li>
          <li>数字个数最少为1位</li>
          <li>密码最小长度8</li>
        </ol>
      </div>
      <el-form-item prop="password2">
        <el-input type="password" placeholder="请输入确认密码" autocomplete="off" v-model="data.openIdDto.password2"/>
      </el-form-item>
      <el-form-item label-width="100">
        <el-button type="primary" @click="openIdPass('openIdDto')" round>修改密码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import {getCurrentInstance, reactive, ref} from "vue";
import UserInfoCom from "../components/UserInfoCom.vue";

export default {
  name: "ChangePwdPage.vue",
  components: {UserInfoCom},
  setup() {
    const {proxy} = getCurrentInstance()
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (proxy.data.openIdDto.password2 !== '') {
          proxy.$refs.openIdDto.validateField('password2')
        }
        callback()
      }
    }
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== proxy.data.openIdDto.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    const data=reactive({
      openIdDto: {
        openId: ref(),
        password: ref(),
        password2: ref(),
        rules: {
          password: [
            {
              pattern: '^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[\\s\\S]{8,16}$',
              message: '至少有一个大写字母，一个小写字母，一个数字，总长度在8-16位',
              trigger: 'blur'
            },
            {
              validator: validatePass,
              message: '请输入正确的密码',
              trigger: 'blur'
            }
          ],
          password2: [
            {required: true, validator: validatePass2, trigger: 'blur'}
          ]
        }
      }
    })

    let userinfo = JSON.parse(localStorage.getItem("user_info"))
    console.log("openId is ", userinfo.openId)
    data.openIdDto.openId = userinfo.openId

    const openIdPass = (params) => {
      proxy.$refs[params].validate((valid) => {
        if (!valid) {
          return;
        } else {
          proxy.$service.forgetPwd(proxy.data.openIdDto).then(result => {
            if (result.res.code === 0) {
              ElMessage.success({
                message: result.res.msg,
                type: 'success',
              })
              localStorage.removeItem("user_info")
              localStorage.removeItem("user_token")
              proxy.$router.push('/login')
            } else {
              ElMessage.error(result.res.msg)
            }
          })
        }
      })
    }

    return {data,openIdPass}
  }
}
</script>

<style scoped>
.center {
  padding: 30px;
}

span h2 {
  font-size: medium;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
  vertical-align: middle;
  font-size: 12px;
}

.alert {
  text-align: left;
  padding: 15px 5px 15px 5px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

ol {
  list-style: none none;
  text-align: left;
  padding: 0px;
}

ol li {
  text-align: left;
}
</style>